<template>
<p>{{ msg }}</p>
<p>{{ msg.split(' ').reverse().join(' ').toUpperCase() }}</p>
<p>{{ reverse }}</p>
<p>{{ num }}</p>
<p>{{ doubleNum }}</p>
<button @click="num = 5">修改num的值</button><br/>
<button @click="doubleNum = 100">修改num的值</button><br/>
</template>
<script setup>
import { computed, ref } from 'vue';

const msg = ref('Hello Vue Welcome to vue')

// 可以通过计算属性对数据进行逻辑处理,实现数据的包装
// 在计算属性中,支持getter与setter方法
// 当直接操作时,默认是getter方法
const reverse = computed(() => {
    return msg.value.split(' ').reverse().join(' ').toUpperCase();
})

// 可以同时指定setter与getter方法
const num = ref(10)

const doubleNum = computed({
    get: ()=>{
        return num.value * 2;
    },
    set(value){
        num.value = value / 2;
    }
})
</script>